import { graphic } from 'echarts'
const color = ['#DB616F', '#00E045', '#F3EF00', '#25C1F1', '#C4F9F3', '#E062AE', '#8378EA', '#C4F926', '#FF5722', '#ffd32a', '#3c40c6', '#ffa801']

const getDefaultSeries = (source, type, option) => {
	let series = [
		{
			type: type,
			...option,
		},
	]
	if (source.length > 1) {
		series = source[0]
			.map((item, index) => {
				if (index !== 0) {
					return {
						type: type,
						...option,
					}
				}
			})
			.filter(Boolean)
	}
	return series
}
export const BasicBar = (option) => {
	const source = option?.dataset?.source || []
	let series = getDefaultSeries(source, 'bar', {})
	return {
		color: option?.color,
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				lineStyle: {
					color: '#ddd',
				},
			},
			backgroundColor: 'rgba(255,255,255,1)',
			padding: [5, 10],
			textStyle: {
				color: '#000',
			},
			// 解决tooltip层级过高遮挡消息提示的弹窗
			extraCssText: 'z-index:9',
		},
		legend: {
			right: 'center',
			top: '6%',
			textStyle: {
				color: '#000',
				fontSize: 12,
				fontWeight: 600,
			},
		},
		grid: {
			left: '2%',
			right: '5%',
			bottom: '6%',
			top: '18%',
			containLabel: true,
		},
		xAxis: {
			type: 'category',
			axisLabel: {
				interval: 0,
			},
		},
		yAxis: {
			type: 'value',
		},
		series,
		...option,
	}
}
export const BasicLineArea = (option) => {
	const source = option?.dataset?.source || []
	let series = getDefaultSeries(source, 'line', {
		areaStyle: {
			color: new graphic.LinearGradient(
				0,
				0,
				0,
				1,
				[
					{
						offset: 0,
						color: `rgba(0, 62, 246,.2)`,
					},
					{
						offset: 1,
						color: 'rgba(255, 255, 255,0)',
					},
				],
				false
			),
		},
		lineStyle: {
			width: 2,
			shadowColor: `rgba(253, 148, 67, .2)`,
			shadowBlur: 4,
			shadowOffsetY: 25,
		},
	})
	return {
		color,
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				lineStyle: {
					color: '#ddd',
				},
			},
			backgroundColor: 'rgba(255,255,255,1)',
			padding: [5, 10],
			textStyle: {
				color: '#000',
			},
		},
		legend: {
			right: 'center',
			top: '6%',
			textStyle: {
				color: '#000',
				fontSize: 12,
				fontWeight: 600,
			},
		},
		grid: {
			left: '2%',
			right: '5%',
			bottom: '6%',
			top: '18%',
			containLabel: true,
		},
		xAxis: {
			type: 'category',
			boundaryGap: false,
			splitLine: {
				show: true,
				interval: 'auto',
				lineStyle: {
					type: 'dashed',
					color: ['#cfcfcf'],
				},
			},
			axisTick: {
				show: false,
			},
			axisLine: {
				lineStyle: {
					color: '#cfcfcf',
				},
			},
			axisLabel: {
				interval: 0,
				textStyle: {
					fontSize: 12,
					color: '#9e9d9f',
					fontWeight: 600,
				},
			},
		},
		yAxis: [
			{
				name: '(%)',
				type: 'value',
				splitLine: {
					show: true,
					lineStyle: {
						type: 'dashed',
						color: ['#cfcfcf'],
					},
				},
				axisTick: {
					show: false,
				},
				axisLine: {
					show: true,
					lineStyle: {
						fontSize: 12,
						color: '#cfcfcf',
					},
				},
				axisLabel: {
					textStyle: {
						fontSize: 12,
						color: '#9e9d9f',
						fontWeight: 600,
					},
				},
				max: 100,
			},
		],
		series,
		...option,
	}
}
export const BasicPie = (option) => {
	const source = option?.dataset?.source || []
	let series = getDefaultSeries(source, 'pie', {
		roseType: true,
		clockwise: false,
		center: ['50%', '50%'],
		zlevel: 2,
		radius: ['4%', '70%'], // 第一个参数控制玫瑰图圆心大小,第二个参数控制玫瑰图大小
		itemStyle: {
			borderRadius: 4,
		},
		label: {
			show: true,
		},
	})
	return {
		color,
		tooltip: {
			trigger: 'item',
			axisPointer: {
				lineStyle: {
					color: '#ddd',
				},
			},
			backgroundColor: 'rgba(255,255,255,1)',
			padding: [5, 10],
			textStyle: {
				color: '#000',
			},
		},
		legend: {
			right: 'center',
			textStyle: {
				color: '#000',
				fontSize: 12,
				fontWeight: 600,
			},
		},
		grid: {
			left: '2%',
			right: '5%',
			bottom: '6%',
			top: '18%',
			containLabel: true,
		},
		series: [
			// 背景装饰1 半透明圆 zlevel: 3 层级第二
			{
				type: 'pie',
				radius: ['0%', '15%'],
				center: ['35%', '50%'],
				zlevel: 3,
				silent: true,
				clockwise: false,
				label: {
					show: false,
				},
				data: [
					{
						name: null,
						value: 0,
						itemStyle: {
							color: 'rgba(255,255,255, 0.5)',
						},
					},
				],
			},
			// 背景装饰3 半透明圆 zlevel: 1 层级最低 作为底盘
			{
				type: 'pie',
				zlevel: 1,
				radius: ['70%', '0%'],
				center: ['35%', '50%'],
				silent: true,
				clockwise: false,
				label: {
					show: false,
				},
				data: [
					{
						name: null,
						value: 0,
						itemStyle: {
							color: 'rgba(255,255,255, 0.1)',
						},
					},
				],
			},
			...series,
		],
		...option,
	}
}

export const BasicLine = (option) => {
	const source = option?.dataset?.source || []
	let series = getDefaultSeries(source, 'line', {
		lineStyle: {
			width: 2,
			shadowColor: `rgba(253, 148, 67, .2)`,
			shadowBlur: 4,
			shadowOffsetY: 25,
		},
	})
	return {
		color,
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				lineStyle: {
					color: '#ddd',
				},
			},
			backgroundColor: 'rgba(255,255,255,1)',
			padding: [5, 10],
			textStyle: {
				color: '#000',
			},
		},
		legend: {
			right: 'center',
			top: '6%',
			textStyle: {
				color: '#000',
				fontSize: 12,
				fontWeight: 600,
			},
		},
		grid: {
			left: '2%',
			right: '5%',
			bottom: '6%',
			top: '18%',
			containLabel: true,
		},
		xAxis: {
			type: 'category',
			boundaryGap: false,
			splitLine: {
				show: true,
				interval: 'auto',
				lineStyle: {
					type: 'dashed',
					color: ['#cfcfcf'],
				},
			},
			axisTick: {
				show: false,
			},
			axisLine: {
				lineStyle: {
					color: '#cfcfcf',
				},
			},
			axisLabel: {
				interval: 0,
				textStyle: {
					fontSize: 12,
					color: '#9e9d9f',
					fontWeight: 600,
				},
			},
		},
		yAxis: {
			type: 'value',
		},
		series,
		...option,
	}
}
